<!-- Dom模板 -->
<template>
  <div class="value_list">
    <!-- Dom内容 -->
    <van-search
      v-model="value"
      show-action
      :value="this.$router.currentRoute.query.val"
      @search="onSearch"
      @cancel="onCancel"
    />

    <div class="top">
      <div
        :class="nowindex === item.num ? 'top_list active' : 'top_list'"
        v-for="(item, index) in list"
        :key="index"
        @click="active(item, index)"
        ref="top"
      >
        <span class="z">{{ item.name }}</span>
        <div class="xx" v-if="item.type">
          <i class="icon iconfont">&#xeb04;</i>
          <i class="icon iconfont">&#xeb05;</i>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="unde" v-if="unde">
        <van-empty image="search" description="未找到相关产品" />
      </div>

      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
        style="min-height: 100%"
      >
        <div class="list_st" v-for="(item, index) in goods" :key="index">
          <img :src="item.goods_url" alt="" />
          <p style="font-size: 14px">{{ item.goods_name }}</p>
          <p style="margin-top: 1%">
            <span style="color: #ff6700; font-size: 18px; line-height: 40px"
              >￥{{ item.price }} </span
            ><span style="text-decoration: line-through; font-size: 13px"
              >￥{{ item.goods_original }}</span
            >
          </p>
          <p class="item-count">
            <span
              >{{ item.goods_evaluate }}条评论
              {{ item.goods_people }}总销量</span
            >
          </p>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import "../../components/font_ss/iconfont";
import * as api from "../../components/api/shmily";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      value: this.$router.currentRoute.query.val,
      list: [
        { name: "综合", type: false, num: 0 },
        { name: "销量", type: false, num: 1 },
        { name: "价格", type: true, num: 2 },
      ],
      nowindex: 0,
      token: JSON.parse(localStorage.getItem("token")),
      goods: this.$router.currentRoute.query.goods,
      unde: false,
      isLoading: false,
      price: false,
    };
  },
  //组件的挂载
  components: {},
  // Vue方法定义
  methods: {
    getshoppList() {
      api.searchs({ val: this.value }).then((res) => {
        // console.log(res);
        this.goods = res.data;
        // console.log(this.goods);
        if (this.goods.length === 0) {
          // console.log("是@@@@@@@");
          this.unde = true;
        } else if (this.goods.length !== 0) {
          // console.log("不是#######");
          this.unde = false;
        }
      });
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.gonggong();
      }, 500);
    },
    // 回车事件
    onSearch(val) {
      if (val === "") {
        return;
        // 判断有没有登录
      } else if (this.token) {
        // 已登录
        api.storeValue({ val: this.value, uid: this.token.uid });
        this.getshoppList();
      } else {
        // 未登录
        api.storeValue({ val: this.value });
        this.getshoppList();
      }
      this.nowindex = 0;
      this.$router.history.push({
        path: "/index_value",
        query: { val },
      });
    },
    // 点击取消事件
    onCancel() {
      this.$router.push("/fenClass");
    },
    active(item) {
      this.nowindex = item.num;
      this.price = !this.price;
      this.gonggong();
      
    },
    gonggong() {
      if (this.nowindex == 0) {
        this.getshoppList();
      } else if (this.nowindex == 1) {
        this.goods = this.goods.sort(this.compare("goods_people"));
        console.log(this.goods);
      } else if (this.nowindex == 2) {
        if (this.price == false) {
          this.goods = this.goods.sort(this.compare("price"));
        } else if (this.price == true) {
          this.goods = this.goods.sort(this.compars("price"));
        }
      }
    },
    // 降序
    compare(prop) {
      return function (a, b) {
        let value1 = a[prop];
        let value2 = b[prop];
        return value2 - value1;
      };
    },
    // 升序
    compars(prop) {
      return function (a, b) {
        let value1 = a[prop];
        let value2 = b[prop];
        return value1 - value2;
      };
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getshoppList();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../components/font_ss/iconfont.css");
.value_list {
  width: 100%;
  height: 100%;
}
.top {
  width: 100%;
  height: 7%;
  border-bottom: 2px solid rgba(238, 238, 238, 100);
  float: left;
}
.top_list {
  width: calc(100% / 3);
  height: 100%;
  float: left;
  text-align: center;
  line-height: 3rem;
  position: relative;
}
.list {
  width: 100%;
  height: calc(100% - 15.5%);
  float: left;
  overflow: auto;
  padding-bottom: 3%;
}
/*滚动条样式*/
.list::-webkit-scrollbar {
  width: 0px;
}
.list img {
  width: 30%;
  height: 23%;
  float: left;
  margin-right: 2%;
}
.list_st {
  width: 100%;
  padding: 2%;
  box-sizing: border-box;
  float: left;
}
.list_st img {
  width: 30%;
  height: 23%;
  float: left;
  margin-right: 2%;
}
.item-count {
  color: rgba(0, 0, 0, 0.54);
  font-size: 0.2rem;
}
.icon {
  margin-left: -13px;
  width: 0;
  height: 0;
}
.z {
  display: inline-block;
}
.active {
  color: #ff6700;
}
.xx {
  width: 50%;
  /* height: 100%; */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 22222;
}
.unde {
  width: 100%;
  height: 50%;
}
.unde img {
  width: 100%;
  height: 75%;
  float: left;
}
</style>